﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FlyText.aspx.cs" Inherits="Demos_FlyText" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

        html,body { height:100%;}
        .container { width:100%;height:100%;position:relative;}

    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="../Scripts/rx.js"></script>
    <script src="../Scripts/rx.time.js"></script>
    <script src="../Scripts/rx.jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var text = 'Reactive Framework is Rocks!';

            var container = $('.container');
            var mouseMove = container.mousemoveAsObservable("mousemove");

            for (var i = 0; i < text.length; i++) {
                (function (i) {
                    var element = $('<span/>').text(text.charAt(i));
                    element.css({ 'position': 'absolute' }).appendTo(container);

                    mouseMove.delay(i * 100).subscribe(function (ev) {
                        element.css({
                            left: ev.clientX + i * 20 + 10 + 'px',
                            top: ev.clientY + 'px'
                        });
                    });

                })(i);
            }

        });
    </script>
</head>
<body>
    <div class="container">
        
    </div>
</body>
</html>
